'use client';

import { useRouter } from "next/navigation";
import { api } from "~/trpc/react";
import { Card, Row, Col, Typography, Tag, Spin, Empty, Progress } from "antd";
import { CheckCircleOutlined, ClockCircleOutlined, BookOutlined } from "@ant-design/icons";
import "./styles.css";

const { Title, Text } = Typography;

const MyCourses = () => {
  const router = useRouter();
  const { data: courses, isLoading } = api.course.getAllCourses.useQuery();

  const getStatusTag = (status: string) => {
    if (status === 'COMPLETED') {
      return <Tag color="success" icon={<CheckCircleOutlined />}>已完成</Tag>;
    } else {
      return <Tag color="processing" icon={<ClockCircleOutlined />}>学习中</Tag>;
    }
  };

  return (
    <div className="p-4">
      <div className="mb-4 flex justify-between items-center">
        <Title level={3} className="mb-0">我的课程</Title>
      </div>

      {isLoading ? (
        <div className="flex justify-center items-center h-64">
          <Spin size="large" tip="加载中..." />
        </div>
      ) : courses && courses.length > 0 ? (
        <Row gutter={[12, 12]} className="course-grid">
          {courses.map((course) => (
            <Col xs={24} sm={12} md={8} lg={6} key={course.id}>
              <Card 
                hoverable 
                className="course-card"
                size="small"
                onClick={() => router.push(`/courses/${course.id}/preview`)}
              >
                <div className="flex flex-col h-full">
                  <div className="mb-1 flex items-center">
                    <BookOutlined className="text-blue-500 mr-2" />
                    <Title level={5} className="course-title mb-0 flex-1">{course.title}</Title>
                  </div>
                  
                  <Text type="secondary" className="course-description">
                    {course.description}
                  </Text>
                  
                  <div className="mt-auto">
                    <div className="flex justify-between items-center mb-1">
                      <Text strong className="text-sm">学习进度</Text>
                      <Text type="secondary" className="text-sm">{course.progressPercentage}%</Text>
                    </div>
                    
                    <Progress 
                      className="course-progress"
                      percent={course.progressPercentage} 
                      status={course.progressPercentage === 100 ? "success" : "active"}
                      size="small"
                      strokeColor={{
                        '0%': '#108ee9',
                        '100%': '#87d068',
                      }}
                    />
                    
                    <div className="course-footer">
                      <Text type="secondary" className="teacher-name">
                        教师: {course.teacher?.name || '未知'}
                      </Text>
                      {getStatusTag(course.status)}
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      ) : (
        <Empty 
          description="暂无课程" 
          className="my-8"
        />
      )}
    </div>
  );
};

export default MyCourses;
